<!--
 * @Author: zhangjingyu
 * @Date: 2020-12-07 20:27:12
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-12 00:53:20
 * @FilePath: \vprisk10.14\src\components\ca\table\left.vue
 * @Description: 表格左侧
-->
<template>
  <div>
    <el-row id="left-top" :style="{ width: yJson.length * 100 + 'px' }">
      <el-col :span="span" v-for="(them, h) in yJson" :key="h">
        <el-col
          :span="24"
          v-for="(them0, h0) in xJson"
          :key="h0"
          style="height: 41px; line-height: 41px"
        >
          <template v-if="h === 0 && h0 === 0"
            >
            <!-- <el-link @click="toExpendShow">视图</el-link> -->
             <el-link></el-link>
            </template
          >
        </el-col>
      </el-col>
    </el-row>
    <el-row id="leftTitle" :style="{ width: yJson.length * 100 + 'px' }">
      <!-- 一层 -->
      <el-col :span="span" v-if="yJson[0]">
        <el-col
          :span="24"
          v-for="(it, j) in unique(yJson[0], 'code', 0)"
          :key="j"
          :style="
            'height:' +
              leftMax / unique(yJson[0], 'code', 0).length +
              'px;' +
              'line-height:' +
              leftMax / unique(yJson[0], 'code', 0).length +
              'px;'
          "
          class="leftTitle"
        >
          {{ it.name }}
        </el-col>
      </el-col>
      <!-- 二层 -->
      <el-col :span="span" v-if="yJson[1]">
        <div v-for="idx1 in unique(yJson[0], 'code', 0).length" :key="idx1">
          <el-col
            :span="24"
            v-for="(it1, j1) in unique(yJson[1], 'code', 1)"
            :key="j1"
            :style="
              'height:' +
                leftMax /
                  (unique(yJson[1], 'code', 1).length *
                    unique(yJson[0], 'code', 0).length) +
                'px;' +
                'line-height:' +
                leftMax /
                  (unique(yJson[1], 'code', 1).length *
                    unique(yJson[0], 'code', 0).length) +
                'px;'
            "
            class="leftTitle"
          >
            {{ it1.name }}
          </el-col>
        </div>
      </el-col>
      <!-- 三层 -->
      <el-col :span="span" v-if="yJson[2]">
        <div v-for="idx1 in unique(yJson[0], 'code', 0).length" :key="idx1">
          <div v-for="idx2 in unique(yJson[1], 'code', 1).length" :key="idx2">
            <el-col
              :span="24"
              v-for="(it2, j2) in unique(yJson[2], 'code', 2)"
              :key="j2"
              :style="
                'height:' +
                  leftMax /
                    (unique(yJson[2], 'code', 2).length *
                      unique(yJson[1], 'code', 1).length *
                      unique(yJson[0], 'code', 0).length) +
                  'px;' +
                  'line-height:' +
                  leftMax /
                    (unique(yJson[2], 'code', 2).length *
                      unique(yJson[1], 'code', 1).length *
                      unique(yJson[0], 'code', 0).length) +
                  'px;'
              "
              class="leftTitle"
            >
              {{ it2.name }}
            </el-col>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 数组拼接函数，拼接个数为i+1
function concatArrs(arr, i) {
  if (i === 0) return arr;
  function fn(newArr, j) {
    if (j > 0) {
      newArr = newArr.concat(arr);
      j--;
      return fn(newArr, j);
    } else {
      return newArr;
    }
  }
  return fn(arr, i);
}
export default {
  name: "tableleft",
  props: {
    yJson: {
      type: Array,
      default: () => {
        return [];
      }
    },
    xJson: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableValue: {
      type: Array,
      default: () => {
        return [];
      }
    },
    readonly: {
      type: Boolean,
      dafault:false
    }
  },
  computed: {
    span() {
      return this.yJson.length === 0 ? 24 : 24 / this.yJson.length;
    },
    leftMax() {
      // 表格最大高度
      let num = 1;
      for (let i = 0; i < this.yJson.length; i++) {
        let n = this.unique(this.yJson[i], "code", i).length;
        num *= n;
        console.log("max", num * 40);
      }
      // console.log("max",num * 40)
      return num * 40;
    }
  },
  methods: {
    // toExpendShow(){
    //   this.$emit("expendShow", true)
    // },
    // importFile(){
    //   this.$emit("importFile", true)
    // },
    //  importFiled(){
    //   this.$emit("importFiled", true)
    // },
    
    // 去重
    unique(arr, attribute, j) {
      var new_arr = [];
      var json_arr = [];
      for (var i = 0; i < arr.length; i++) {
        // console.log(new_arr.indexOf(arr[i][attribute]));
        if (new_arr.indexOf(arr[i][attribute]) == -1) {
          //  -1代表没有找到
          new_arr.push(arr[i][attribute]); //如果没有找到就把这个name放到arr里面，以便下次循环时用
          json_arr.push(arr[i]);
        } else {
        }
      }
      // return concatArrs(json_arr, j);
      return json_arr;
    },
  }
};
</script>

<style lang="scss" scoped>
#leftTitle,
#left-top {
  border-left: 1px solid #ebedf7;
  border-top: 1px solid #ebedf7;
  background: #c8d7f4;
  .el-col {
    border-bottom: 1px solid #ebedf7;
    border-right: 1px solid #ebedf7;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #666;
  }
}
// #left-top {
//     border-left: 1px solid #EBEDF7;
//   border-top: 1px solid #EBEDF7;
//   background: #C8D7F4;
//   .el-col
// }
</style>